import { type ChangeEvent, useContext } from 'react';
import { EditPostContext } from '@/contexts/edit';
import { useTranslations } from 'use-intl';

export default function ContentLink() {
  const { form, setForm } = useContext(EditPostContext)!;
  const t = useTranslations('PostEditPage');

  function onChange(e: ChangeEvent<HTMLInputElement>) {
    const name = e.target.name;
    const value = e.target.value;
    setForm({
      ...form,
      [name]: value,
    });
  }

  return (
    <>
      {form.contentType === 'LINK' && (
        <div className="row mb-4">
          <div className="col">
            <input
              type="text"
              name="contentLink"
              value={form.contentLink}
              className="form-control text-center"
              placeholder={t('enterHyperlink')}
              onChange={onChange}
            />
          </div>
        </div>
      )}
    </>
  );
}
